<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <title>表格数据排序</title>
  
</head>

<body>
  <table id="myTable">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </table>
  <input type="text" id="nameInput" placeholder="姓名" />
  <input type="number" id="ageInput" placeholder="年龄" />
  <button id="addRow" class="add-button">添加数据</button>
</body>
<script>
  const addRow = document.getElementById("addRow");//获取按钮对象
  const name = document.getElementById("nameInput");//获取名字输入对象
  const age = document.getElementById("ageInput");//获取年龄输入对象
  const myTable = document.getElementById("myTable");//获取id为"myTable"的对象

  const data = []; //存储数据的数组

  //按钮点击事件
  addRow.addEventListener("click", function () {
    if (name.value === "" || age.value === "") {
      alert("请输入完整的信息")
      return;
    }

    // push方法将数据存储到数组中
    data.push({
      name: name.value,
      age: age.value
    })

    // 根据年龄大小排序刷新表格
    sort_data(data);

    // 刷新表格
    myTable.innerHTML = "<tr><th>姓名</th><th>年龄</th><th>操作</th></tr>";
    refresh_table(data, myTable)

  })


  // 根据年龄大小排序
  const sort_data = function (data) {
    data.sort(function (a, b) {
      return a.age - b.age;
    })
  }

  const refresh_table = function (data, myTable) {
    data.forEach(function (item) {
      const tr = document.createElement("tr")//表列
      const td_name = document.createElement("td")//名字
      const td_age = document.createElement("td")//年龄
      const td_op = document.createElement("td")//操作
      const btn_del = document.createElement("button")//删除
      btn_del.innerHTML = "删除";
      btn_del.addEventListener("click", function () {
        tr.remove()
        data.splice(data.indexOf(item), 1)
      })
      td_name.innerHTML = item.name;
      td_age.innerHTML = item.age;
      td_op.appendChild(btn_del);
      tr.appendChild(td_name);
      tr.appendChild(td_age);
      tr.appendChild(td_op);
      myTable.appendChild(tr);
    })
  }
</script>
</html>
<style>
  table {
    width: 50%;
    margin-top: 20px;
    border: 1px solid #ddd;
  }

  th {
    background-color: #dfeefd;
  }

  th,
  td {
    padding: 8px;
    text-align: left;
  }

  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  .add-button {
    margin-top: 20px;
  }
</style>



<!-- var newtr = document.createElement('tr')
t1.appendChild(newtr);
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
td1.innerHTML = name.value;
td2.innerHTML = age.value;
td3 = document.body.appendChild(x);
newtr.appendChild(td1);
newtr.appendChild(td2);
newtr.appendChild(td3);
var as = document.querySelector('button');
console.log(as);
// for (var i = 0; i < as.length-1; i++) { // as[i].onclick=function () { // t1.deleteRow(i); // } // } // var
  rows=Array.from(t1.querySelectorAll('tr')); // rows.shift(); // rows.sort(function (a, b) { // var
  ageA=parseInt(a.cells[1].textContent, 10); // var ageB=parseInt(b.cells[1].textContent, 10); // return ageA - ageB; //
  }); // var tbody=table.querySelector('tbody'); // tbody.innerHTML='' ; // rows.forEach(function (row) { //
  tbody.appendChild(row); // }); -->